<template>

    <v-app>
      <!-- 导航栏   -->
      <v-app-bar
          elevation="4"
          outlined
          app
          color="#FFF"
      >
        <header-bar/>
      </v-app-bar>
      <v-main>
        <!-- 主题内容  -->
        <v-container fluid class="d-flex justify-center">
          <v-card flat width="320">
            <!-- 博主信息  -->
            <v-card elevation="4" class="pt-3">
              <v-list-item>
                <v-list-item-avatar>
                  <v-img :src="authorInfo.headPic"></v-img>
                </v-list-item-avatar>
                <v-list-item-content>
                  <v-list-item-title >{{ authorInfo.nickname }}</v-list-item-title>
                  <v-list-item-subtitle>{{ authorInfo.signature }}</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
              <v-row class="pt-5 px-5 text-center">
                <v-col>
                  <p class="mb-1">{{ authorInfo.fansCount | readCount }}</p>
                  <p class="grey--text">粉丝</p>
                </v-col>
                <v-col>
                  <p class="mb-1">{{ authorInfo.likeCount | readCount }}</p>
                  <p class="grey--text">获赞</p>
                </v-col>
                <v-col>
                  <p class="mb-1">{{ authorInfo.integralCount | readCount }}</p>
                  <p class="grey--text">积分</p>
                </v-col>
              </v-row>
              <v-row class="mt-0 px-5 text-center">
                <v-col class="pt-2">
                  <v-btn
                      rounded
                      outlined
                      width="120"
                      height="30"
                      color="info">
                    <v-icon left>
                      mdi-plus
                    </v-icon>
                    关注
                  </v-btn>
                </v-col>
                <v-col class="pt-2">
                  <v-btn
                      rounded
                      outlined
                      width="120"
                      height="30"
                      color="orange">
                    <v-icon left>
                      mdi-comment-outline
                    </v-icon>
                    私信
                  </v-btn>
                </v-col>
              </v-row>
            </v-card>
            <!-- 博主文章  -->
            <v-card elevation="4" class="mt-8 px-2">
              <div class="d-flex justify-space-between px-2 pt-4">
                <span>博主文章</span>
                <v-btn
                    icon
                    small
                    class="grey--text"
                >
                  <v-icon>mdi-dots-horizontal</v-icon>
                </v-btn>
              </div>
              <v-divider/>
              <v-list dense>
                <v-list-item-group
                    color="primary"
                >
                  <v-list-item
                      v-for="blog in blogs"
                      :key="blog.id"
                      class="pl-2 mb-1"
                  >
                    <v-list-item-content>
                      <v-list-item-title v-text="blog.title"></v-list-item-title>
                    </v-list-item-content>
                    <v-list-item-action>
                      <span class="text-caption grey--text">{{ blog.read | readCount }}</span>
                    </v-list-item-action>
                  </v-list-item>
                </v-list-item-group>
              </v-list>
            </v-card>
            <!-- 评分  -->
            <v-card elevation="4" class="mt-6 py-2 rating">
              <v-card-subtitle>觉得这篇博客怎么样呢？</v-card-subtitle>
              <v-rating
                  hover
                  half-increments
                  v-model="rating"
                  length="5"
                  size="36"
                  value="3"
                  color="orange"
                  background-color="grey darken-1"
              ></v-rating>
            </v-card>
          </v-card>

          <!-- 博客正文  -->
          <v-card elevation="4" width="880" class="ml-5" height="max-content">
            <v-card-title class="font-weight-black pb-2">{{ blog.title }}</v-card-title>
            <v-container class="grey lighten-5 d-flex align-center grey--text text-body-2">
              <v-chip
                  label
                  dark
                  small
                  class="red"
                  >
                {{ blog.type }}
              </v-chip>
              <span class="ml-5">发布时间: {{ blog.time }}</span>
              <span class="ml-5">
                <v-icon class="grey--text mr-2">mdi-eye</v-icon>
                <span>{{ blog.eye | readCount }}</span>
              </span>
              <span class="ml-5">
                文章标签：
                    <v-chip
                        label
                        dark
                        small
                        v-for="(label, index) in blog.label"
                        :key="label.id"
                        :class="[labelColor[index], 'mr-2']"
                    >
                    {{ label.name }}
                  </v-chip>
              </span>
            </v-container>
            <v-container v-html="blog.content"></v-container>
              <v-card elevation="0" class="mt-5">
                <j-comment
                    :key-map="keyMap"
                    :showNumber="2"
                    :comment-datas="comments"
                    @submitComment="submitComment">
                </j-comment>
              </v-card>
          </v-card>
        </v-container>
        <!-- 右侧侧边栏  -->
        <!-- 设置animate.css渐入渐出  -->
        <transition
            appear
            name="animate__animated animate__bounce"
            enter-active-class="animate__fadeIn"
            leave-active-class="animate__fadeOut"
        >
          <div class="rightContent grey--text text-center" v-show="rightContent.show">
            <div>
              <v-btn
                  outlined
                  small
                  fab
                  color="grey"
                  class="ma-2"
                  @click="showReportDialog"
              >
                <v-icon>mdi-information-outline</v-icon>
              </v-btn>
              <p class="text-caption mb-0">举报</p>
            </div>
            <div>
              <v-btn
                  class="ma-2"
                  outlined
                  small
                  fab
                  color="orange"
              >
                <v-icon>mdi-share</v-icon>
              </v-btn>
              <p class="text-caption mb-0">{{ blog.share | readCount }}</p>
            </div>
            <div>
              <v-btn
                  class="ma-2"
                  outlined
                  small
                  fab
                  color="red"
              >
                <v-icon>mdi-star</v-icon>
              </v-btn>
              <p class="text-caption mb-0">{{ blog.collect | readCount }}</p>
            </div>
            <div>
              <v-btn
                  class="ma-2"
                  outlined
                  small
                  fab
                  color="blue"
              >
                <v-icon>mdi-message-text</v-icon>
              </v-btn>
              <p class="text-caption mb-0">{{ blog.comment | readCount }}</p>
            </div>
            <div>
              <v-btn
                  large
                  fab
                  color="blue"
                  aria-label="滚动页面至顶部"
                  title="滚动页面至顶部"
                  class="ma-2"
                  @click="$vuetify.goTo(0)"
              >
                <v-icon color="white">mdi-navigation</v-icon>
              </v-btn>
            </div>
          </div>
        </transition>
      </v-main>
      <!--  举报弹出框  -->
      <report-dialog title="博客举报"></report-dialog>
      <!-- 登录注册弹出框   -->
      <login-register-dialog/>

      <v-footer padless class="mt-10">
        <zf-footer/>
      </v-footer>
    </v-app>
</template>

<script>
import LoginRegisterDialog from "@/components/LoginRegisterDialog/LoginRegisterDialog";
import ReportDialog from "@/components/ReportDialog/ReportDialog";
window.hljs = require('highlight.js')
require('highlightjs-line-numbers.js')
import 'highlight.js/styles/atom-one-dark.css'  //这里有多个样式，

export default {
  name: "BlogDetail",
  components: {LoginRegisterDialog, ReportDialog},
  data() {
    return {
      authorInfo: null,
      blogs: [],
      rating: 0,
      blog: null,
      labelColor: ['green', 'orange', 'blue', 'pink', 'grey'],
      rightContent: {
        show: false
      },
      keyMap: {
        pid: "parent_comment_id",
        id: "id",
        isAdmin: "admin_comment"
      },
      comments: [
        {
          id: 1,
          admin_comment: 0,
          avatar:
              "https://img2.baidu.com/it/u=134769530,4268043097&fm=253&fmt=auto&app=138&f=JPEG?w=533&h=333",
          create_time: "2020-05-31 23:03:55",
          email: "",
          nickname: "nickname1",
          parent_comment_id: null,
          content: "我是评论1"
        },
        {
          id: 2,
          admin_comment: 0,
          avatar:
              "https://img2.baidu.com/it/u=3133697304,2308274678&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313",
          create_time: "2020-06-1 23:03:55",
          email: "",
          nickname: "nickname2",
          parent_comment_id: 1,
          content: "我是评论2"
        },
        {
          id: 3,
          admin_comment: 0,
          avatar:
              "https://img2.baidu.com/it/u=3772577665,2044310843&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=727",
          create_time: "2020-05-2 23:03:55",
          email: "",
          nickname: "nickname3",
          parent_comment_id: null,
          content: "我是评论3"
        },
        {
          id: 4,
          admin_comment: 0,
          avatar:
              "https://img0.baidu.com/it/u=3966731730,957573008&fm=253&fmt=auto&app=138&f=JPEG?w=281&h=500",
          create_time: "2020-06-2 23:03:55",
          email: "",
          nickname: "nickname4",
          parent_comment_id: 2,
          content:
              "我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,"
        }
      ]
    }
  },
  props: ['id'],
  methods: {
    submitComment(item) {
      console.log("item: ", item);
    },
    queryBlogAuthorInfo() {
      // 请求服务器
      this.authorInfo = {
        id: 1,
        nickname: '云中漫步ZDC',
        headPic: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
        signature: '人生自古谁无死，留取丹心照汗青',
        fansCount: 776,
        likeCount: 4543,
        integralCount: 24343,
      }
    },
    queryBlogs() {
      this.blogs = [
        {id: 1, title: '考前50分-四六级必考词汇预测', read: 483200},
        {id: 2, title: '魔导国东征记－世界守护突破（622～624）三更！•OVERLORD', read: 154641},
        {id: 3, title: 'FGO国服《妖精圆桌领域 阿瓦隆･勒･菲 星辰诞生之刻》2.6前篇主线概况攻略', read: 120005},
        {id: 4, title: '1999元的miniLED HDR1000显示器HKC PG271Q简评', read: 100058},
        {id: 5, title: '22年四六级翻译预测--共青团', read: 75645},
      ]
    },
    queryBlog() {
      this.blog = {
        id: 23,
        title: 'Java实现图片文件上传',
        time: '2022-12-10',
        type: '原创',
        eye: 24329,
        comment: 34523,
        share: 78,
        collect: 90,
        label: [
          {id: 1, name: 'JAVA'},
          {id: 2, name: 'JAVA WEB'},
          {id: 3, name: '图像上传'},
          {id: 4, name: 'WEB'},
          {id: 5, name: 'IT'},
        ],
        content: '<p>Java实现后台图片上传，将上传图片的接口进行分层，便于维护接口。</p>\n' +
            '<h3>接口部分（interface）</h3>\n' +
            '<p>将接口分为单图片上传以及多图片上传</p>\n' +
            '<pre>\n' +
            '<code class="language-java">public interface FileUploadService {\n' +
            '\t//单图片上传\n' +
            '    PicUploadResult uplodadImg(MultipartFile uploadFile, HttpServletRequest request);\n' +
            '\n' +
            '\t//多图片上传\n' +
            '    PicUploadResult uploadManyImg(MultipartFile[] uploadFile, HttpServletRequest request);\n' +
            '}\n' +
            '</code></pre>\n' +
            '<br>' +
            '<h3>接口实现类（interface impl）</h3>\n' +
            '<h4>上传图片方法类（主要）</h4>\n' +
            '<p>上传多个图片只是使用了数组的方式将文件存到<em>MultipartFile</em>里面。以防代码冗余，所以将实现方法抽出来</p>\n' +
            '<pre>\n' +
            '<code class="language-java">   /**\n' +
            '     * 上传图片方法类\n' +
            '     * @param multipartFile\n' +
            '     * @param request\n' +
            '     * @return\n' +
            '     */\n' +
            '    private PicUploadResult uploadImgMethod(MultipartFile multipartFile, HttpServletRequest request) {\n' +
            '        PicUploadResult picUploadResult = new PicUploadResult();\n' +
            '\n' +
            '        if (multipartFile.isEmpty()) {\n' +
            '            //返回选择文件提示\n' +
            '            picUploadResult.setLegal(false);\n' +
            '            return picUploadResult;\n' +
            '        }\n' +
            '        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd/");\n' +
            '        String format = sdf.format(new Date());\n' +
            '        //存放上传文件的文件夹\n' +
            '        File file = new File(baseFilePath + format);\n' +
            '        logger.info("-----------存放上传文件的文件夹【" + file + "】-----------");\n' +
            '        logger.info("-----------输出文件夹绝对路径 -- 这里的绝对路径是相当于当前项目的路径而不是“容器”路径【" + file.getAbsolutePath() + "】-----------");\n' +
            '        if (!file.isDirectory()) {\n' +
            '            //递归生成文件夹\n' +
            '            file.mkdirs();\n' +
            '        }\n' +
            '        //获取原始的名字  original:最初的，起始的  方法是得到原来的文件名在客户机的文件系统名称\n' +
            '        String oldName = multipartFile.getOriginalFilename();\n' +
            '        logger.info("-----------文件原始的名字【" + oldName + "】-----------");\n' +
            '        String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf("."), oldName.length());\n' +
            '        logger.info("-----------文件要保存后的新名字【" + newName + "】-----------");\n' +
            '        try {\n' +
            '            //构建真实的文件路径\n' +
            '            File newFile = new File(file.getAbsolutePath() + File.separator + newName);\n' +
            '            //转存文件到指定路径，如果文件名重复的话，将会覆盖掉之前的文件,这里是把文件上传到 “绝对路径”\n' +
            '            multipartFile.transferTo(newFile);\n' +
            '            String filePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/picbook/" + UPLOAD_PATH_PREFIX + format + newName;\n' +
            '            logger.info("-----------【" + filePath + "】-----------");\n' +
            '            picUploadResult.setLegal(true);\n' +
            '            picUploadResult.setImgPath(filePath);\n' +
            '            return picUploadResult;\n' +
            '        } catch (Exception e) {\n' +
            '            e.printStackTrace();\n' +
            '        }\n' +
            '        picUploadResult.setLegal(false);\n' +
            '        return picUploadResult;\n' +
            '    }\n' +
            '</code></pre>\n' +
            '<br>' +
            '<h3>实现方法接口</h3>\n' +
            '\n' +
            '<h4>单图片上传</h4>\n' + '<br>' +
            '\n' +
            '<pre>\n' +
            '<code class="language-java">public PicUploadResult uplodadImg(MultipartFile multipartFile, HttpServletRequest request) {\n' +
            '    return uploadImgMethod(multipartFile, request);\n' +
            '}\n' +
            '</code></pre>\n' +
            '<br>' +
            '<h4>多图片上传</h4>\n' + '<br>' +
            '<pre>\n' +
            '<code class="language-java">public PicUploadResult uploadManyImg(MultipartFile[] uploadFile, HttpServletRequest request) {\n' +
            '\n' +
            '    List&lt;String&gt; imgPaths = new ArrayList&lt;&gt;();\n' +
            '    for (MultipartFile multipartFile : uploadFile) {\n' +
            '        PicUploadResult picUploadResult = uploadImgMethod(multipartFile, request);\n' +
            '        if(picUploadResult.isLegal()){\n' +
            '            imgPaths.add(picUploadResult.getImgPath());\n' +
            '        } else{\n' +
            '            return picUploadResult;\n' +
            '        }\n' +
            '\n' +
            '    }\n' +
            '\n' +
            '    PicUploadResult picUploadResult = new PicUploadResult();\n' +
            '    picUploadResult.setLegal(true);\n' +
            '    picUploadResult.setImgPahts(imgPaths);\n' +
            '    return picUploadResult;\n' +
            '}\n' +
            '</code></pre>\n' +
            '<br>' +
            '<h4>实现方法补充</h4>\n' +
            '<br>' +
            '<pre>\n' +
            '<code class="language-java">    // 项目上传至绝对路径(在yml里配置你的项目绝对路径)\n' +
            '    @Value("${file.save-path}")\n' +
            '    private String baseFilePath;\n' +
            '    // 项目根路径下的目录  -- SpringBoot static 目录相当于是根路径下（SpringBoot 默认）\n' +
            '    private final static String UPLOAD_PATH_PREFIX = "statics/uploadFile/";\n' +
            '</code></pre>\n' +
            '<br>' +
            '<h3>控制层</h3>\n' +
            '<br>' +
            '<pre>\n' +
            '<code class="language-java">public class FileUploadController {\n' +
            '    // 允许上传的格式 图片形式\n' +
            '    private static final String[] IMAGE_TYPE = new String[]{".bmp", ".jpg", ".jpeg", ".png"};\n' +
            '\n' +
            '    @Resource\n' +
            '    private FileUploadService fileUploadService;\n' +
            '\n' +
            '    @PostMapping("/uploadImg")\n' +
            '    public R uploadImg(@RequestParam("file") MultipartFile file, HttpServletRequest request) {\n' +
            '        boolean isFlag = false;\n' +
            '        for (String type : IMAGE_TYPE) {\n' +
            '            System.out.println(file.getOriginalFilename());\n' +
            '            if (StringUtils.endsWithIgnoreCase(file.getOriginalFilename(), type)) {\n' +
            '                isFlag = true;\n' +
            '                break;\n' +
            '            }\n' +
            '        }\n' +
            '\n' +
            '        if (isFlag) {\n' +
            '            PicUploadResult picUploadResult = fileUploadService.uplodadImg(file, request);\n' +
            '            boolean isLegal = picUploadResult.isLegal();\n' +
            '\n' +
            '            if (isLegal) {\n' +
            '                Map resMap = new HashMap&lt;&gt;();\n' +
            '                resMap.put("imgPath", picUploadResult.getImgPath());\n' +
            '                return R.ok(resMap);\n' +
            '            } else {\n' +
            '                return R.error("图片上传有误");\n' +
            '            }\n' +
            '        } else {\n' +
            '            return R.error("上传的图片格式必须为:bmp,jpg,jpeg,png");\n' +
            '        }\n' +
            '\n' +
            '    }\n' +
            '\n' +
            '    @PostMapping("/uploadManyImg")\n' +
            '    public R uploadManyImg(@RequestParam("files") MultipartFile[] files, HttpServletRequest request) {\n' +
            '        boolean isFlag = false;\n' +
            '        for (MultipartFile uploadFile : files) {\n' +
            '            for (String type : IMAGE_TYPE) {\n' +
            '                if (StringUtils.endsWithIgnoreCase(uploadFile.getOriginalFilename(), type)) {\n' +
            '                    isFlag = true;\n' +
            '                    break;\n' +
            '                }\n' +
            '            }\n' +
            '        }\n' +
            '\n' +
            '        if (isFlag) {\n' +
            '            PicUploadResult picUploadResult = fileUploadService.uploadManyImg(files, request);\n' +
            '            boolean isLegal = picUploadResult.isLegal();\n' +
            '\n' +
            '            if (isLegal) {\n' +
            '                Map resMap = new HashMap&lt;&gt;();\n' +
            '                resMap.put("imgPaths", picUploadResult.getImgPahts());\n' +
            '                return R.ok(resMap);\n' +
            '            } else {\n' +
            '                return R.error("图片上传有误");\n' +
            '            }\n' +
            '        } else {\n' +
            '            return R.error("上传的图片格式必须为:bmp,jpg,jpeg,png");\n' +
            '        }\n' +
            '    }\n' +
            '}\n' +
            '</code></pre>\n' +
            '<br>' +
            '<h3>工具类</h3>\n' +
            '\n' +
            '<p>根据实际情况添加所需的字段</p>\n' +
            '<pre>\n' +
            '<code class="language-java">public class PicUploadResult {\n' +
            '    private boolean isLegal;\n' +
            '    private String imgPath;\n' +
            '    private List&lt;String&gt; imgPahts;\n' +
            '}\n' +
            '</code></pre>'
      }
    },
    showReportDialog() {
      this.$store.commit("blog/reportSwitch", true)
    }
  },
  created() {
    this.queryBlogAuthorInfo()
    this.queryBlogs()
    this.queryBlog()
  },
  mounted() {
    window.hljs.highlightAll();
    window.hljs.initLineNumbersOnLoad();

    window.addEventListener('scroll', ()=> {
      const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
      this.rightContent.show = scrollTop > 1000;

    },true)
  }
}
</script>

<style lang="less">
  code {
    font-family: Consolas,serif !important;
  }
  td.hljs-ln-line.hljs-ln-numbers {
    padding-right: 16px;
  }
  .rating {
    position: sticky;
    top: 100px;
  }
  .rightContent {
    position: fixed;
    left: 50%;
    margin-left: 630px;
    bottom: 100px;
  }
  .j-comment {
    width: 800px !important;
  }
</style>
